<!--suppress XmlUnboundNsPrefix -->
<template>
  <div v-if="groupData.name" class="intro-container" :class="{active:focus}">
    <scroll-container ref="scrollContainer">
      <div class="intro" data-index="tar_1_0">

        <div class="content-group">
          <div class="info-group"  >
              <img v-if="$store.state.live.defaultImg" :src="$store.state.live.defaultImg" alt="">
          </div>
          <div class="video-content">
            <span class="title">{{groupData.name}}</span>
            <!--<span class="date">{{groupData.base.createTime.split(' ')[0]}}</span>-->
          </div>
          <div class="video-content-introduce">{{groupData.introduce}}</div>
        </div>

      </div>
    </scroll-container>
    <p v-if="groupData.moduleType === 1" class="tip">按“上、下”键，翻页</p>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312
  },
  props: ["groupData"],
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
      //console.log(this.scrollY);
    },
    scrollTo(targetIndex) {
      //console.log("targetIndex", targetIndex);
      let group = targetIndex.split("_")[0];
      if (group == 0) {
        return;
      }
      this.$refs.scrollContainer.scrollTo(targetIndex);
    }
  },
  created() {
    let that = this;
    new fObject(
      1,
      0,
      null,
      () => {
        that.$refs.scrollContainer.scrollBy(200);
      },
      () => {
        that.$refs.scrollContainer.scrollBy(-200);
      },
      "0-0",
      null
    );
    this.hs.fObjCommit();
    this.hs.addFocus([1], (group, objid, objindex) => {
      this.focus = true;
    });
    this.hs.addBlur([1], (group, objid, objindex) => {
      this.focus = false;
    });
  },
  data() {
    return {
      groups: [1],
      scrollY: 0,
      focus: false,
      backObjName: "xyzb-intro",
      hs: this.$store.state.hs,
      head: {
        left: "0-0"
      },
    };
  }
};
</script>
<style lang="less" scoped>
.active {
  border: 2px solid #ffffff !important;
}
.intro-container {
  margin-top: 184px;
  // margin-left: 80px;
  width: 1026px;
  height: 747px;
  border-radius: 8px;
  border: solid 2px #3693bf;
  position: relative;
  padding: 16px;
  .tip {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: #fff;
    height: 80px;
    line-height: 42px;
    bottom: -100px;
  }
  .content {
    overflow: hidden;
    .intro {
      display: flex;
      flex-direction: column;
      .info-group {
        margin-top: 0px;
        margin-left: 6px;
        width: 994px;
        height: 558px;
        font-size: 38px;
        color: #fff;
        img{
          width: 994px;
          height: 558px;
        }
      }

      .video-cover {
        width: 100%;
        height: auto;
      }
      .video-content {
        font-size: 26px;
        line-height: 50px;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 28px;
        }
        .date {
          font-size: 24px;
          margin-right: 0;
        }
      }
      .video-content-introduce{
        color: #a8e7ff;
        font-size: 26px;
      }

      .article-title {
        font-size: 50px;
        font-weight: 700;
      }
      .article-content {
        margin-top: 30px;
        font-size: 26px;
        line-height: 50px;
        color: #000000;
      }
    }
  }
}
</style>
